<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>相册记录</title>
  <link rel="stylesheet" href="./js/layui-v2.4.5/layui/css/layui.css">
  <script src="./js/layui-v2.4.5/layui/layui.js"></script>
  <style>
  </style>
</head>

<body>
  <div class="layui-container">
    <span class="layui-breadcrumb" lay-separator="/">
      <a href="">统计报表</a>&nbsp;
      <a href="">相册记录</a>
    </span>
    <div class="layui-form" style="margin-top:1rem">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label" style="text-align: left">主播ID/昵称</label>
          <div class="layui-input-inline" style="width: 300px;">
            <input type="text" name="name" id="name" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label" style="text-align: left">时间周期</label>
        </div>
        <div class="layui-inline">
          <select id="time" name="city" lay-verify="">
            <option value="">请选择</option>
            <option value="010">一周</option>
            <option value="021">一个月</option>
            <option value="0571">一年</option>
          </select>    
        </div>
        <div class="layui-inline">
          <button class="layui-btn layui-btn-normal" id="search">查询</button>
        </div>
        <div class="layui-inline">
          <button class="layui-btn">重置</button>
        </div>
      </div>
      <div class="layui-inline">
        <button class="layui-btn layui-btn-primary">+批量操作</button>
      </div>
      <div class="layui-inline">
        <button class="layui-btn">....</button>
      </div>
    </div>
    <table id="demo" lay-filter="test"></table>    
  </div>
  <script>
    //类ui的使用【理解当元素全部加载完进行事件处理】
    layui.use(['element','form','table','jquery'],function(){
      var element = layui.element,
          form = layui.form,
          table = layui.table,
          $ = layui.jquery
      table.render({
        elem:"#demo",
        height:400,
        url:"http://jsonplaceholder.typicode.com/users",
        page:true,
        response: {
           statusName: 'status',
           statusCode: 200,
           msgName: 'hint',
           countName: 'total',
           dataName: 'rows' 
        }, 
        parseData:function(res){
          return {
            "status": 200,
            "hint":"", 
            "total": 10, 
            "rows": res
          };
        },
        cols:[[
          {type:"checkbox",fixed:"left",width:30},
          {
            field:'id',
            title:'时间（一周）',
            width:80,
            sort:true,
          },
          {
            field:"name",
            title:"姓名",
            width:80
          },
          {
            field:"username",
            title:"主播ID/昵称",
            width:80,
          },
          {
            field:"email",
            title:"用户昵称",
            width:177
          }
          ,{field: 'address', title: '查看相册（张）', width: 180,templet:'<div>{{d.address.street}}/{{d.address.suite}}</div>'}
          ,{field: 'phone', title: '收到洽贝', width: 180}
          ,{field: 'website', title: '网址', width: 180}
          ,{field: 'company', title: '公司名称', width: 135,templet:'<div>{{d.company.name}}</div>'},
          {fixed:"right",width:150,align:'center',toolbar:"#bardemo"}
        ]]
      })
      $(".layui-btn.layui-btn-primary").click(function(){
        alert("进行批量处理")
      })
      table.on('tool(test)',function(obj){
        var data = obj.data;
        var layEvent = obj.event;
        var tr = obj.tr;
        if(layEvent == 'del'){
          layer.confirm('真的进行删除吗？',function(index){
            obj.del();
            //调接口
            layer.close(index);//关闭窗口
          })
        }
      })
      $.ajax({
        url:"http://jsonplaceholder.typicode.com/users",
        type:"GET",
        dataType:"JSON",
        success:function(res){
          //console.log(res)
        },
        error:function(err){
          console.log(err)
        }
      })
      $("#search").click(function(){
        var msg = $("#name").val()
        alert(msg)
      })
      $("#time").change(function(){
        var val = $(this).val();
        alert(val) 
      })
    })
  </script>
  <script type="text/html" id="bardemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
</body>

</html>